<template>
	<vCommonPage :type="1" title="智能导诊" >
		<div slot="customContent" style="width: 100%" class="xzjt">
<!-- 			<div class="topTitle">
				请选择您的具体就诊部位
			</div>
			<div class="bwNameDiv">
				{{$store.state.zndz.bwInfo.key_text}}
			</div>
			<div class="detailBox">
				<el-button v-for="(item,index) in detailList"
					class="detailBoxItem" @click="clickDetailItem(item,index)">
					{{item.key_text}}
				</el-button>
			</div> -->
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
			<!-- 病症描述 -->
			<transition name="el-fade-in-linear">
				<div class="bzmsBox" v-show="showBox">
					<div class="bzmsBoxTilte">
						请选择与您的不适症状贴近的病症描述(可多选)
					</div>
					<div class="zz">
						<!-- {{datialItem.key_text}}--{{$store.state.zndz.bwInfo.key_text}} -->
					</div>
					<div class="choseBox">
						<el-button :class="item.isClick?'choseBoxItem blueClick':'choseBoxItem'"
							v-for="(item,index) in choseList" @click="clickChose(item,index)">{{item.name}}
						</el-button>
					</div>
					<div class="centerBox">
						<el-button class="centerBtnCancel" @click="cancel()">取消</el-button>
						<el-button class="centerBtnMakeSure" @click="makeSure()">确认</el-button>
					</div>
				</div>
			</transition>
			<div v-show="showBox" @click="hoddenBox()" class="yiny"></div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		MessageBox,
		Loading
	} from "element-ui";
	import {
		getSysGuideMenuItemByParentId, //部位
		getSysGuideMenuMatchByMenuItemId ,//症状
		getRecommendSymAndDept
	} from "@api/apiBox/zndz"
	export default {
		name: "zndz",
		data() {
			return {
				detailList: [],
				choseList: [],
				showBox: true,
				datialItem: ''
			};
		},
		methods: {
			async clickDetailItem() {
				//请求获取
				let zzData = {
					data: {
						sex:this.$store.state.zndz.bwInfo.sex,
						bwId:this.$store.state.zndz.bwInfo.menuId
					},
					that: this
				}
				const res = await getRecommendSymAndDept(zzData);
				console.log(res, '症状名称')
				let zzRes = res.data;
				for (let item of zzRes) {
					item.isClick = false;
				}
				this.choseList = zzRes;

				setTimeout(() => {
					this.showBox = true;
				}, 200)
			},
			//点击病症描述
			clickChose(item, index) {
				this.choseList[index].isClick = !this.choseList[index].isClick;
			},
			cancel() {
				this.showBox = false;
			},
			makeSure() {
				let list = {
					detailIdList: [], //疼痛。。 详细症状
					datialItem: this.datialItem //额头。。 详细部位
				};
				//组合症状 存储到缓存中
				let isHasClick = false;
				for (let item of this.choseList) {
					if (item.isClick) {
						list.detailIdList.push(item)
						isHasClick = true;
					}
				}
				if(isHasClick){
					this.$store.dispatch("zndz/updateDetailInfo", list); //详细选择信息
					this.showBox = false;
					setTimeout(() => {
						this.$router.push({
							name: 'tjks'
						})
					}, 200)
				}else{
					MessageBox.alert('请至少选择一个症状！' , {
						confirmButtonText: "确定",
						callback: action => {
							MessageBox.close();
						}
					});
				}

			},
			hoddenBox() {
				this.showBox = false;
			},
			// async initData() {
			// 	let data = {
			// 		data: {
			// 			sex: this.$store.state.zndz.bwInfo.sex,
			// 			parentId: this.$store.state.zndz.bwInfo.key
			// 		},
			// 		that: this
			// 	}
			// 	const res = await getSysGuideMenuItemByParentId(data);
			// 	let resData = res.data;
			// 	for (let item of resData) {
			// 		item.isClick = false;
			// 	}
			// 	this.detailList = resData;
			// }
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {
			this.clickDetailItem();
		}
	};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
	@import "../../assets/css/zndz/xzjtjzbw.scss";
</style>

<style>
	.xzjt .el-button+.el-button {
		margin-left: 0px;
	}
</style>
